<template>
	<view class="wrap">
    <view class="task-list-item" :border="false" padding="20" margin="20rpx">
      <view class="list-head">
        <u-avatar shape="square" src="https://ff-cloud.oss-cn-beijing.aliyuncs.com/app/img/avatar/avatar-02.jpeg"/>
        <u--text text="花无缺" :size="style.fontSize" margin="0 50rpx 0 20rpx"/>
        <u--text text="2021年10月24日" type="info" :size="style.fontSize"></u--text>
      </view>
      <u-line margin="30rpx 0" length="100%"></u-line>
      <view class="list-body">
        <u--text text="流调点名称：北京海淀医院" type="info" :size="style.fontSize"></u--text>
        <u--text text="开始时间：2021年10月25日14:30" type="info" :size="style.fontSize"></u--text>
        <u--text text="结束时间：2021年10月27日14:30" type="info" :size="style.fontSize"></u--text>
      </view>
      <u-line margin="30rpx 0" length="100%"></u-line>
      <view class="list-foot"  @click="navTo('/pagework/ldt/detail')">
        <u--text text="查看更多" type="success" :size="style.fontSize"></u--text>
      </view>
    </view>
    <view class="task-list-item" :border="false" padding="20" margin="20rpx">
      <view class="list-head">
        <u-avatar shape="square" src="https://ff-cloud.oss-cn-beijing.aliyuncs.com/app/img/avatar/avatar-02.jpeg"/>
        <u--text text="花无缺" :size="style.fontSize" margin="0 50rpx 0 20rpx"/>
        <u--text text="2021年10月24日" type="info" :size="style.fontSize"></u--text>
      </view>
      <u-line margin="30rpx 0" length="100%"></u-line>
      <view class="list-body">
        <u--text text="流调点名称：北京海淀医院" type="info" :size="style.fontSize"></u--text>
        <u--text text="开始时间：2021年10月25日14:30" type="info" :size="style.fontSize"></u--text>
        <u--text text="结束时间：2021年10月27日14:30" type="info" :size="style.fontSize"></u--text>
      </view>
      <u-line margin="30rpx 0" length="100%"></u-line>
      <view class="list-foot"  @click="navTo('/pagework/ldt/detail')">
        <u--text text="查看更多" type="success" :size="style.fontSize"></u--text>
      </view>
    </view>
    <view class="task-list-item" :border="false" padding="20" margin="20rpx">
      <view class="list-head">
        <u-avatar shape="square" src="https://ff-cloud.oss-cn-beijing.aliyuncs.com/app/img/avatar/avatar-02.jpeg"/>
        <u--text text="花无缺" :size="style.fontSize" margin="0 50rpx 0 20rpx"/>
        <u--text text="2021年10月24日" type="info" :size="style.fontSize"></u--text>
      </view>
      <u-line margin="30rpx 0" length="100%"></u-line>
      <view class="list-body">
        <u--text text="流调点名称：北京海淀医院" type="info" :size="style.fontSize"></u--text>
        <u--text text="开始时间：2021年10月25日14:30" type="info" :size="style.fontSize"></u--text>
        <u--text text="结束时间：2021年10月27日14:30" type="info" :size="style.fontSize"></u--text>
      </view>
      <u-line margin="30rpx 0" length="100%"></u-line>
      <view class="list-foot"  @click="navTo('/pagework/ldt/detail')">
        <u--text text="查看更多" type="success" :size="style.fontSize"></u--text>
      </view>
    </view>
	</view>
</template>
<script>
export default {
  data() {
    return {
      style:{
        fontSize: 16
      }
    }
  },
  created(){
  },
  methods: {

    navTo(url) {
      uni.navigateTo({
        url: url
      });
    }
  }
}
</script>
<style lang="scss">

  page {
    background-color:  $u-f-pg-bg-color;
  }

  .task-list-item{
    padding: 10rpx 20rpx 10rpx;
    margin: 10rpx 20rpx 10rpx;
    background-color:  $u-f-main-color;
    border-radius: 25rpx;
    .list-head{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .list-body{
      // display: flex;
    }
    .list-foot{

    }
  }

</style>
